<template>
	<view class="content">
		<view class='labelNav'>
			<view class='item'>
				<u-icon color="#ffffff" name="checkmark-circle"></u-icon>
				<span>100%正品保证</span>
			</view>
			<view class='item'>
				<u-icon color="#ffffff" name="checkmark-circle"></u-icon>
				<span>所有商品精挑细选</span>
			</view>
			<view class='item'>
				<u-icon color="#ffffff" name="checkmark-circle"></u-icon>
				<span>售后无忧</span>
			</view>
		</view>
	   <view class="carCont">
			<view class="zcaozuo" v-if="mallList.length>0">
				<p>购物数量：<span style="color:#ff0000;">5</span></p>
				<p @click="chooseClick">{{showStatus ? '管理' : '取消'}}</p>
			</view>
			<view class="cont" v-if="mallList.length>0">
				<view class="conts">
					<view class="item" v-for="(item,index) in mallList" :key="index">
						<view class="itemLeft">
							<u-checkbox-group v-model="item.checked">
								<u-checkbox icon-color="#ffffff" activeColor="red" shape="circle" name="1" 
								:checked="item.checked"></u-checkbox>
							</u-checkbox-group>
							<image :src="item.logo" mode=""></image>
						</view>
						<view class="itemRight">
							<view class="wenzi">
								<p>{{item.title}}</p>
								<p>属性：{{item.shuxing}}</p>
								<p>￥{{item.price}}</p>
							</view>
							<view class="number">
								<u-number-box style="margin-top:80px;" v-model="carNum"></u-number-box>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom" v-if="mallList.length>0">
				<view class="caozuos">
					<u-checkbox-group activeColor="red" v-model="checked" @change="checkChange">
						<u-checkbox shape="circle" name="1" :checked="checked" label="全选"></u-checkbox>
					</u-checkbox-group>
					<view class="xiadan" v-if="showStatus">
						<p>￥3.00</p>
						<u-button type="primary" 
						style="width:80px;background-color:#ff0000;border-color:#ff0000;" text="立即下单"></u-button>
					</view>
					<view class="xiadan" v-else>
						<u-button type="primary" style="width:80px;margin-right:10px;"
						  text="收藏"></u-button>
						<u-button type="primary" 
							style="width:80px;background-color:#ff0000;border-color:#ff0000;" 
							text="删除"></u-button>
					</view>
				</view>
			</view>
	   </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mallList:[
					{
						checked:1,
						logo:'../../static/logo.png',
						title:"我是标题",
						shuxing:"默认",
						price:"3.00",
						carNum:0,
					},
					{
						checked:1,
						logo:'../../static/logo.png',
						title:"我是标题",
						shuxing:"默认",
						price:"3.00",
						carNum:0,
					},
					{
						checked:1,
						logo:'../../static/logo.png',
						title:"我是标题",
						shuxing:"默认",
						price:"3.00",
						carNum:0,
					},
					{
						checked:1,
						logo:'../../static/logo.png',
						title:"我是标题",
						shuxing:"默认",
						price:"3.00",
						carNum:0,
					},
					{
						checked:1,
						logo:'../../static/logo.png',
						title:"我是标题",
						shuxing:"默认",
						price:"3.00",
						carNum:0,
					},
					{
						checked:1,
						logo:'../../static/logo.png',
						title:"我是标题",
						shuxing:"默认",
						price:"3.00",
						carNum:0,
					},
					{
						checked:1,
						logo:'../../static/logo.png',
						title:"我是标题",
						shuxing:"默认",
						price:"3.00",
						carNum:0,
					},
					{
						checked:1,
						logo:'../../static/logo.png',
						title:"我是标题",
						shuxing:"默认",
						price:"3.00",
						carNum:0,
					},
					{
						checked:1,
						logo:'../../static/logo.png',
						title:"我是标题",
						shuxing:"默认",
						price:"3.00",
						carNum:0,
					},
					{
						checked:1,
						logo:'../../static/logo.png',
						title:"我是标题",
						shuxing:"默认",
						price:"3.00",
						carNum:0,
					}
				],
				checked:0,
				carNum:0,
				showStatus:true,
			}
		},
		methods: {
			chooseClick(){
				this.showStatus=!this.showStatus
			},
			checkChange(e){
				this.mallList.forEach(item=>{
					item.checked=e[0]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.content{
	height:calc(100vh - 50px);
	overflow:hidden;
	background-color:#f5f5f5;
}
.zcaozuo{
	position:fixed;
	height:50px;
	width:100%;
	background-color:#ffffff;
	top:60px;
	z-index:2000;
	display:flex;
	align-items:center;
	justify-content:space-between;
	p{
		margin:0 20px;
	}
}
.bottom{
	position:fixed;
	bottom:50px;
	width:100%;
	border-top: 1px solid #f0f0f0;
	background-color:#ffffff;
	.caozuos{
		display:flex;
		align-items:center;
		padding:10px;
		justify-content:space-between;
		.xiadan{
			display:flex;
			align-items:center;
			p{
				margin-right:10px;
				color:#ff0000;
				font-weight:bold;
				font-size:20px;
			}
		}
	}
}
.cont{
	overflow:hidden;
	box-sizing:border-box;
	padding-top:85px;
	margin-top:20px;
	.conts{
		width:100%;
		margin:0 auto;
		overflow-y:auto;
		height:calc(100vh - 65px);
		padding-bottom:60px;
		.item{
			background-color:#ffffff;
			padding:10px;
			width:90%;
			border-radius:10px;
			margin:10px auto;
			display:flex;
			align-items:center;
			.itemLeft{
				display:flex;
				image{
					width:80px;
					height:80px;
					margin-left:5px;
				}
			}
			.itemRight{
				display:flex;
				margin-left:10px;
				.wenzi{
					line-height:40px;
					p:nth-child(2){
						color:#c0c0c0;
					}
					p:nth-child(3){
						color:#ff0000;
						font-weight:bold;
						font-size:20px;
					}
				}
				.number{
					position:relative;
					left:20px;
					.caozuo{
						position:absolute;
						right:10px;
						top:0;
					}
				}
			}
			
		}
	}
}
.labelNav{
	height:60px;
	padding:20px;
	font-size: 22rpx;
	color: #fff;
	position: fixed;
	left: 0;
	width: 100%;
	display:flex;
	overflow:hidden;
	align-items:center;
	justify-content:space-between;
	box-sizing: border-box;
	background-color:#ff0000;
	z-index: 5;
	top: 0;
	.item{
		display:flex;
		align-items:center;
		span{
			margin-left:2px;
		}
	}
}
</style>
